<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在</title>
    <script type="text/javascript">
        //每次按键弹起，就获取输入内容，如果输入的内容为6个内容，就通过ajax到后台验证
        //如果输入的内容不是6个内容，不做处理
        function checkUserName(userName){
            if(userName!=null&&userName.length==6){
                console.log('program>>> 获取到输入的6个字符内容');
                //步骤1：创建xmlhttprequest对象
                var xhr=new XMLHttpRequest();
                console.log('program>>> xmlhttprequest对象创建成功');
                //步骤2：设置参数
                xhr.open('POST','${pageContext.request.contextPath}/servlet/checkusernameforservlet?key01='+new Date().getTime()+'');
                //告诉服务器端  数据的组织方式是keyvalue
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                console.log('program>>> xmlhttprequest对象设置参数成功');
                //步骤4：处理返回的内容
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4){
                        if(xhr.status==200){
                            console.log('program>>> 后台程序执行成功，返回内容成功过');
                            var backContent=xhr.responseText;
                            console.log('后台返回的内容为：'+backContent+'。');
                            var spanElement=document.getElementById('resID');
                            spanElement.innerHTML=backContent;
                            console.log('program>>> ajax执行结束');
                        }
                    }
                }
                //步骤3：发送请求
                xhr.send('username='+userName);
                console.log('program>>> 发送请求成功');
            }else {
                console.log('输入的内容不是6个！');
            }
        }
    </script>
</head>
<body>
<form>
    用户名[POST]：<input id="usernameID" type="text" name="username"
                    maxlength="6" onkeyup="checkUserName(this.value)" /><span id="resID"></span><br>
    密码：<input
        id="userpasswordid01" type="text" name="username" maxlength="4" /><br>
    确认密码：<input id="userpasswordid02" type="text" name="username" maxlength="4" /><br>
    <input type="submit" value="提交"> 光标移出后，立即检查结果
</form>
</body>
</html>